<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="utf-8">
    <title>staff</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>

    <style>
        #selectStaff{
            margin-top: 15px;
        }
        #selectStaff button{
            width: 80px;
            height: 38px;
        }
    </style>
</head>
<body>
<%--头部工具栏----------------------------------------------%>
<table class="layui-hide" id="staffTable" lay-filter="staffTable"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="addStaff">新增员工</button>
        <button class="layui-btn layui-btn-sm" lay-event="ceshi">测试按钮</button>
    </div>

    <%--模糊搜索查询表单-------------------------------------%>
    <div class="layui-form-item" id="selectStaff" >
        <form>
            <label class="layui-form-label">员工号</label>
            <div class="layui-input-inline">
                <input type="text" name="staffId"   placeholder="请输入员工编号" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="staffName"   placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="roleId" id="roleIdd" >
                    <option value="0">请选择角色</option>
                </select>
            </div>

            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="deptIdd" >
                    <option value="0">请选择部门</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="selectStaff">查询</button>
                <button type="reset" class="layui-btn layui-btn-sm" style="background: #9F9F9F" >重置</button>
            </div>
        </form>
    </div>
</script>



<script type="text/html" id="barDemo">
    {{# if(d.status == 110){ }}
    <b>老板不能动！！</b>
    {{# }}}
    {{# if(d.status == 1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del" >离职</a>
    {{# }}}
    {{# if(d.status == 0){ }}
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del" >在职</a>
    {{# }}}
</script>

<%--新增/修改表单------------------------------------------------%>
<form hidden class="layui-form" id="insertForm" lay-filter="insertFilter">
    <input type="hidden" name="id"/>
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="staffId" id="staffID" lay-verify="required" readonly="readonly" placeholder="请输入员工编号" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" required lay-verify="required|realname"  placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password" required lay-verify="required|pass"  placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone"  placeholder="请输入电话" lay-verify="phone"  autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-inline">
            <input type="text" name="idCard" lay-verify="idCard"   placeholder="请输入身份证" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address"   placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <%-- <div class="layui-form-item">
         <label class="layui-form-label">入职日期</label>
         <div class="layui-input-inline">
             <input type="date" name="createdTime" required lay-verify="required"  placeholder="请输入入职日期" autocomplete="off" class="layui-input">
         </div>
        &lt;%&ndash; <label class="layui-form-label">离职日期</label>
         <div class="layui-input-inline">
             <input type="text" name="resignedTime" required lay-verify="required"  placeholder="请输入离职日期" autocomplete="off" class="layui-input">
         </div>&ndash;%&gt;
     </div>--%>

    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
            <select name="roleId" id="roleId" lay-filter="">
                <option>请选择角色</option>
            </select>
        </div>
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="deptid" id="deptId" lay-filter="">
                <option>请选择部门</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon">  </i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img id="img1" src="" alt="上传成功后渲染" style="width:100px;height:100px">
                <%--用来存储图片上传成功后返回的url--%>
                <input type="hidden" id="imageUrl" name="url"/>
            </div>
        </div>
    </div>

    <label class="layui-form-label">    </label>
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="button" class="layui-btn layui-btn-primary">返回</button>
    </div>

</form>


<script>
    layui.use(['table','layer','form','jquery','upload'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;

        /**
         * 页面加载完成后执行
         */
        $(function () {
            showStaff();
            getRoles();
            getTypes();
        });

        //拖拽上传
        /*upload.render({
            elem: '#test10'
            ,url: '${pageContext.request.contextPath}/staff/upload' //改成您自己的上传接口
            ,//用于文件上传前的回调
            choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    $("#img").attr("src",result);
                    //result得到图像的base64编码
                });
            }
            ,done: function(res){//上传成功后的回调函数
                alert(res.url);
                //$("#imgpath").val(res);
                $("#imageUrl").val(res.url);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
                //alert(res.str);
                layer.msg('上传成功');
                //img1.src = res.url;
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.str);
            }
        });*/

        /**
         * 查询员工
         */
        function showStaff(){
            table.render({
                elem: '#staffTable'
                ,url:'${pageContext.request.contextPath}/staff/showStaffs'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '员工表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', fixed: 'left', sort: true,hide:true}
                    ,{field:'staffId', title:'员工编号', sort: true}
                    ,{field:'staffName', title:'员工姓名', sort: true}
                    ,{field:'password', title:'密码'}
                    ,{field:'phone', title:'电话' }
                    ,{field:'idCard', title:'身份证' }
                    ,{field:'address', title:'地址',  sort: true }
                    ,{field:'createdTime', title:'入职时间', sort: true }
                    //,{field:'resignedTime', title:'离职时间' , sort: true }
                    ,{field:'status', title:'状态', sort: true,templet:function (d) {
                            if (d.status==1){
                                return '<button type="button" class="layui-btn-normal layui-btn layui-btn-sm" lay-event="status" >在职</button>';
                            } else if (d.status==0){
                                return '<button type="button" class="layui-btn-warm layui-btn layui-btn-sm" lay-event="status">离职</button>';
                            } else if (d.status==110){
                                return '老板';
                            }
                        }}
                    ,{field:'roleId', title:'职位id' , sort: true,hide:true}
                    // ,{field:'rname', title:'职位' , sort: true }
                    ,{field:'deptid', title:'部门id' , sort: true,hide: true}
                    // ,{field:'dname', title:'部门' , sort: true}
                    ,{field:'url', title:'图像',templet:function (d){
                            return '<img src="'+d.url+'" height="50px" />'
                        } }
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page:true
                ,even:true
                ,limit:10
                ,limits:[5,10,15,20]
            });

        }


        //头工具栏事件
        table.on('toolbar(staffTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'ceshi':
                    //toastr.success('12');
                    break;
                case 'addStaff':
                    $('#insertForm')[0].reset();
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/staff/getMaxStaffId',
                        //dataType:'json',
                        success:function (data) {
                            //alert(data[0].maxStaffId);
                            $('#staffID').val(data);
                        }
                    });
                    layer.open({
                        type: 1
                        ,title: '新增员工'
                        ,area: ['800px' ,'300px']
                        ,content: $('#insertForm')
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(staffTable)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){

                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 1
                    ,title: '修改员工信息'
                    ,area: ['800px' ,'300px']
                    ,content: $('#insertForm')
                });
                form.val("insertFilter",data);
            } else if(obj.event === 'status'){
                var s;
                if (data.status==1){
                    s = "离职";
                }else {
                    s = "在职";
                }
                layer.confirm("确定"+s+"？",function () {
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/staff/updateStatus',
                        data:{id:data.id,status:data.status},
                        success:function (data) {
                            if (data.code=="200"){
                                layer.closeAll();
                                layer.msg(s+"成功");
                                //toastr.success(s+'成功')
                            }else {
                                layer.msg(s+"失败");
                            }
                            showStaff();
                            getRoles();
                            getTypes();
                        }
                    })
                })

            }
        });
        /*
        * 表单新增/修改提交
        * */
        form.on('submit(formDemo)',function (data) {
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/staff/insertAndUpdateStaff',
                data:data.field,
                dataType:'json',
                success:function (data) {
                    //alert(data.msg);
                    //layer.closeAll();
                    if (data.code=="200"){
                        layer.msg(data.msg,{icon:6});
                    } else if (data.code=="400"){
                        layer.msg(data.msg,{icon:5});
                    } else if(data.code=="500"){
                        layer.closeAll();
                        layer.msg(data.msg+"",{icon:5});
                    }
                    showStaff();
                }
            });
        });

        /**
         * 获得全部角色类型，并填充到下拉框
         */
        function getRoles(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/role/getAllRoleType',
                dataType:'json',
                success:function (data) {
                    //alert(data);
                    for (var i = 0;i<data.length;i++){
                        //alert(data);
                        $('#roleId').append(
                            $('<option>').val(data[i].rid).text(data[i].rname)
                        );
                        $('#roleIdd').append(
                            $('<option>').val(data[i].rid).text(data[i].rname)
                        );
                    }
                    form.render('select');
                }
            });
        }


        /**
         * 获得全部部门类型，并填充到下拉框
         */
        function getTypes(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/dept/queryAllDname',
                dataType:'json',
                success:function (data) {
                    //alert(data);
                    for (var i = 0;i<data.length;i++){
                        $('#deptId').append(
                            $('<option>').val(data[i].deptid).text(data[i].dname)
                        );
                        $('#deptIdd').append(
                            $('<option>').val(data[i].deptid).text(data[i].dname)
                        );
                    }
                    form.render('select');
                }
            });
        }


        /**
         * 通过编号、姓名、职位、部门的查询的表单重载
         */
        form.on('submit(selectStaff)',function (data) {
            //alert(data)
            table.reload('staffTable',{
                where:{
                    staffId:data.field.staffId,
                    staffName:data.field.staffName,
                    roleId:data.field.roleId,
                    deptid:data.field.deptid
                },page:{
                    curr:1
                }
            });
            console.log(data.field);
            getRoles();
            getTypes();
        });

        /**
         * 表单验证
         */
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,phone:[
                /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/
                ,'请输入正确的手机号格式'
            ]
            ,idCard:[
                /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                ,'请输入正确的身份证号'
            ]
            ,realname:[
                /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/
                ,'请输入正确的姓名'
            ]


        });





    });
</script>

</body>
</html>
